import React, { useEffect, useState } from 'react';
import {
    Button,
    Form,
    Input,
    Select,
    Checkbox,
    Row,
    Col
} from 'antd';

interface propsTs {
    title: string,
    itemobj?: any,
    onSuccess: (values: any, isEdit: boolean) => void;
    onCancel: () => void
}
const FormList = (props: propsTs) => {
    const [form] = Form.useForm();
    useEffect(() => {
        if (props.title == '编辑') {
            form.setFieldsValue(props.itemobj);
        }
    })
    const onFinish = (values: any) => {
        if (props.title === '添加') {
            const newItem = {
                id: new Date().getTime(), // 生成唯一ID
                ...values
            };
            props.onSuccess(newItem, false);
        } else if (props.title == '编辑') {
            const obj = {
                ...props.itemobj,
                ...values
            };
            props.onSuccess(obj, true);
        }
    };


    return (
        <Form
            form={form}
            onFinish={onFinish}
        >
            <Form.Item
                label="用户名"
                name='name'
                rules={[{ required: true, message: '请输入用户名' }]}>
                <Input />
            </Form.Item>
            <Form.Item
                label="角色"
                name='role'
                rules={[{ required: true, message: '请选择角色' }]}>
                <Select>
                    <Select.Option value="1">超级管理员 </Select.Option>
                    <Select.Option value="2">开发者</Select.Option>
                </Select>
            </Form.Item>
            <Form.Item
                label="简介"
                name='desc'
                rules={[{ required: true, message: '请输入简介' }]}>
                <Input />
            </Form.Item>
            <Form.Item
                label="标签"
                name='tags'
                rules={[{ required: true, message: '请输入简介' }]}>
                <Checkbox.Group style={{ width: '100%' }}>
                    <Row>
                        <Col span={8}>
                            <Checkbox value="前端工程师">前端工程师</Checkbox>
                        </Col>
                        <Col span={8}>
                            <Checkbox value="developer">developer</Checkbox>
                        </Col>
                        <Col span={8}>
                            <Checkbox value="Dooring">Dooring</Checkbox>
                        </Col>
                        <Col span={8}>
                            <Checkbox value="V6.Dooring">V6.Dooring</Checkbox>
                        </Col>
                        <Col span={8}>
                            <Checkbox value="橙子表单">橙子表单</Checkbox>
                        </Col>
                        <Col span={8}>
                            <Checkbox value="Next-Admin">Next-Admin</Checkbox>
                        </Col>
                    </Row>
                </Checkbox.Group>
            </Form.Item>
            <Form.Item>
                <Button type="primary" htmlType="submit">Button</Button>
            </Form.Item>
        </Form>
    );
};

export default FormList;